<template>
  <div class="content">
    <div id="components-form-demo-advanced-search">
      <a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
        <a-row :gutter="24">
          <a-col :span="24">
            <div id="return"><span>问题管理</span></div>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="关键字">
              <a-input class="field-right" v-decorator="[`key`]" :allowClear="true" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="添加时间">
              <a-range-picker v-decorator="[`data`]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-button type="primary" html-type="submit">
              <a-icon type="search" />搜索
            </a-button>
            <a-button class="btn1" @click="handleReset">
              <a-icon type="sync" />重置
            </a-button>
            <el-button class="btn1" v-if="operation.findIndex(d => d.Name === '添加') != -1" type="success" @click="management()" size="mini"><i class="el-icon-document-add"></i>新增问题类型</el-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div style="margin-top:12px;">
      <el-table :data="tableData" v-loading="loading" :max-height="tableHeight" border style="width: 100%">
        <el-table-column min-width="200" label="问题类型">
          <template slot-scope="scope">
            <i class="el-icon-price-tag"></i>
            <span style="margin-left: 10px">{{ scope.row.Name }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="180" label="上级">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.ParentName }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="添加人">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.AddUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column scope="scope" min-width="180" label="添加时间">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.AddTime }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="246">
          <template slot="header" slot-scope="scope">
            操作
          </template>
          <template slot-scope="scope">
            <el-tag v-if="operation.findIndex(d => d.Name === '修改') != -1" @click="management(scope.row)"><i class="el-icon-edit-outline"></i>编辑</el-tag>
            <el-tag type="danger" v-if="operation.findIndex(d => d.Name === '删除') != -1 && scope.row.IsEnableDelete" @click="deleteList(scope.row)"><i class="el-icon-delete"></i>删除</el-tag>
            <el-tag type="success" v-if="operation.findIndex(d => d.Name === '表单列表') != -1" @click="setForm(scope.row)"><i class="el-icon-setting"></i>表单设置</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                     :page-sizes="pagination.pageSizeOptions" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="pagination.total"
      >
      </el-pagination>
    </div>
    <add :text="text" v-show="addIf" @closeFun="closeFun"></add>
    <management :text="text" :nowTime="nowTime" v-show="manageIf" @closeFun="closeFun"></management>
  </div>
</template>

<script>
	import Func from '@/utils/func'
	import Cache from '@/utils/cache'
	import {
		comm
	} from '@/api/comm'
	import add from './add'
	import management from './management.vue'
	import {
		getQuestionList,
		deleteQuestion
	} from '@/api/follow'
	const data = []
	export default {
		components: {
			add,
			management
		},
		data() {
			return {
				tableData: [],
				tableHeight: parseFloat(window.innerHeight - 160),
				Teamstate: [{
						ID: 0,
						Name: '-团队状态-'
					},
					{
						ID: 1,
						Name: '正常'
					},
					{
						ID: 2,
						Name: '已删除'
					}
				],
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: (total) => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				addIf: false,
				manageIf: false,
				text: {},
				visible: false,
				confirmLoading: false,
				itemId: '',
				selectid: 0,
				wareHouse: [],
				loading: false,
				CenterDropdownList: [],
				values: {},
				menus: [],
				operation: [],
				nowTime: ''
			}
		},
		computed: {},
		created() {
			this._getList()
			this.menus = JSON.parse(localStorage.getItem('jurisdiction'))
			let i = this.menus.findIndex(d => d.Name === '问题类型')
			if (i != -1) {
				this.operation = this.menus[i].functionGroup[0].function
			}
		},
		mounted() {},
		methods: {
			detail(data) {
				this.addIf = !this.addIf
				if (data) {
					this.text = Object.assign(data, {
						time: new Date()
					})
				} else {
					this.text = {}
				}
			},
			async _getList() {
				let data = {}
				this.loading = true
				if (this.values) {
					data = this.values
				}
				data.pageIndex = this.pagination.currentPage
				data.pageSize = this.pagination.pageSize
				if (this.values) {
					data = Object.assign(data, this.values)
				}
				let res = await getQuestionList(data)
				this.loading = false
				this.tableData = res.data.data
				const pagination = { ...this.pagination
				}
				pagination.total = parseFloat(res.data.pageList.TotalItemCount)
				this.pagination = pagination
			},
			deleteList(text) {
				let that = this
				this.$confirm({
					title: '提示',
					centered: 'centered',
					content: '此操作将永久删除该数据, 是否继续？',
					onOk() {
						that.handleOk(text.ID)
					},
					onCancel() {}
				})
			},
			setForm(row) {
				this.$router.push({
					name: 'setform',
					params: {
						ID: row.ID,
						Name: row.Name
					}
				})
			},
			management(data) {
				this.manageIf = !this.manageIf
				this.nowTime = new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
				if (data) {
					this.text = Object.assign(data, {
						time: new Date()
					})
				} else {
					this.text = {}
				}
			},
			async handleOk(ID) {
				let res = await deleteQuestion({
					ID: ID
				})
				if (res.data.code === 1) {
					this.$message.success(res.data.msg)
					this._getList()
				} else {
					this.$message.error(res.data.msg)
				}
			},
			handleReset() {
				this.values = {}
				this.form.resetFields()
				this._getList()
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val
				this._getList()
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val
				this._getList()
			},
			handleSearch(e) {
				e.preventDefault()
				this.form.validateFields((error, values) => {
					if (values['data']) {
						values.startTime = values.data[0].format('YYYY-MM-DD')
						values.endTime = values.data[1].format('YYYY-MM-DD')
					}
					delete values['data']
					this.pagination.currentPage = 1
					this.values = values
					this._getList()
				})
			},
			handleCancel(e) {
				this.visible = false
			},
			closeFun(type) {
				this.addIf = false
				this.manageIf = false
				if (type) {
					this._getList()
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		min-height: 100%;
		padding: 15px;
		background: #fff;
	}
	.btn1{
		margin-left: 15px;
	}
	.home-form {
		margin: 0 0 20px 0;
		padding-bottom: 15px;
		border-bottom: 1px solid #EBEEF5;
	}
	#return{
		padding: 10px 15px;
		margin-bottom: 15px;
		color: #000;
		background: rgb(245, 246, 247);
		span{
			cursor: pointer;
			&:hover{
				color: #075DB3;
			}
		}

	}
	/deep/ .el-table th {
		background-color: #f4f4f5 !important;
		padding: 8px 5px !important;
	}

	/deep/.cell {
		.el-tag {
			cursor: pointer;
			margin-right: 10px;
			padding: 0 4px !important;
			&:last-child{
				margin-right: 0;
			}
		}
	}

	[class^=el-icon-] {
		margin-right: 5px;
		font-size: 16px;
	}

	/deep/.ant-form-item {
		display: flex;
		margin-bottom: 10px !important;

		/deep/.ant-form-item-label {
			width: 80px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: left;
		}

		/deep/.ant-form-item-control-wrapper {
			flex: 1;
		}
	}

	/deep/.el-table td,
	/deep/.el-table th {
		padding: 5px;
	}

	/deep/.el-table th.is-leaf {
		background: #fafafa;
	}

	.el-pagination {
		margin-top: 10px;
	}

	.option {
		margin-top: 10px;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.option .btn {
		height: 36px;
		line-height: 36px;
		padding: 0 10px;
		float: left;
		background: #1890ff;
		color: #fff;
		margin-right: 10px;
		border-radius: 3px;
		cursor: pointer;
		border: none;
	}

	.foot {
		text-align: center;
		margin-top: 100px;
	}
</style>
